<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div>
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-small">
            <i class="layui-icon">&#xe654;</i>
        </button>
        <button class="layui-btn layui-btn-small">
            <i class="layui-icon">&#xe642;</i>
        </button>
        <button class="layui-btn layui-btn-small">
            <i class="layui-icon">&#xe640;</i>
        </button>
        <button class="layui-btn layui-btn-small">
            <i class="layui-icon">&#xe602;</i>
        </button>
    </div>

</div>

<table id="userTable" lay-filter="test"></table>

</body>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>


<script type="text/javascript">
    layui.use(['table', 'form', 'jquery','element'], function (table, form, $,elemnt) {

        var userTable = table.render(
            {

                elem: '#userTable',  // 原始的table元素
                height: 400,
                url: 'http://localhost:8080/rbac-rest-service/rbac/menu', // 异步数据的地址
                page: true,  // 是否分页
                id: 'userTable',
                cols: [[{field: 'id', width: 80, sort: true, title: 'ID'},
                    {field: 'title', width: 150, title: '菜单名称'},
                    {field: 'pid', width:80 , title: '菜单父级'},
                    {field: 'url', width: 250, title: '菜单的路径'},
                    {field: 'state', width: 100, title: '菜单状态'},
                    {field: 'isButton', width: 100, title: '是否是按钮'},
                    {field: 'gmtCreate', width: 250, title: '菜单创建时间'},
                    {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}

                ]]
            });
        table.on('tool', function (obj) {
            var data = obj.data;

            if (obj.event === 'edit') {
                sessionStorage['menu']=JSON.stringify(obj.data);
                // location.href="test111.html"
                func11();

            }
            if (obj.event === 'del'){
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                    $.post("http://localhost:8080/rbac-rest-service/rbac/menu/" + data.id
                        ,{_method:"delete"}
                        ,function () {
                            layer.msg("删除成功");
                        });
                });
            }
        });

        function func11() {
            layer.open({
                type: 2,
                title: false,
                fixed:false,
                closeBtn: 1,
                area: ['500px', '300px'],
                offset: 'auto', //右下角弹出

                content: 'editMenu.html'
            });
        }



    });
</script>
</html>